<template>
  <page-layout>
    <a-card>
      <a-button size="large" @click="$router.go(-1)">返回</a-button>
      <a-form
        style="margin-top: 36px"
        :form="form"
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 12 }"
      >
        <a-form-item label="权限名称" :required="true">
          <a-input
            placeholder="请输入权限名称"
            size="large"
            v-decorator="[
              'name',
              {
                initialValue: editData.name,
                rules: [{ required: true, message: '请输入权限名称!' }]
              }
            ]"
          ></a-input>
        </a-form-item>
        <a-form-item label="权限别名(中文)" :required="true">
          <a-input
            placeholder="请输入权限别名(中文)"
            size="large"
            v-decorator="[
              'remark',
              {
                initialValue: editData.remark,
                rules: [{ required: true, message: '请输入权限别名!' }]
              }
            ]"
          ></a-input>
        </a-form-item>
        <a-form-item label="权限路由" :required="true">
          <a-input
            placeholder="请输入权限路由"
            size="large"
            v-decorator="[
              'route',
              {
                initialValue: editData.route,
                rules: [{ required: true, message: '请输入权限路由' }]
              }
            ]"
          ></a-input>
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 12, offset: 10 }">
          <a-button type="primary" size="large" @click="handleSubmit">
            提交
          </a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </page-layout>
</template>

<script>
import { add, getPermissions, edit } from "@/services/permissions";
import PageLayout from "@/layouts/PageLayout";
export default {
  name: "demand",
  components: { PageLayout },
  data() {
    this.form = this.$form.createForm(this);
    return {
      isClear: false,
      detail: "",
      selectDatas: [],
      editData: {}
    };
  },
  created() {
    // 如果时编辑过来
    if (this.$route.query.id) {
      // console.log(this.$route.query.id);
      getPermissions({ id: this.$route.query.id }).then((res) => {
        console.log(res);
        if (res.data.code !== 20000) {
          this.$message.error(res.data.message);
          return false;
        } else {
          this.editData = res.data.data;
        }
      });
    }
  },
  computed: {},
  methods: {
    handleSubmit() {
      this.form.validateFields((err, values) => {
        console.log(err, values);
        if (!err) {
          if (!this.$route.query.id) {
            add(values).then((res) => {
              // console.log(res, res);
              if (res.data.code === 20000) {
                this.$message.success({
                  content: res.data.message || "提交成功~",
                  onClose: () => {
                    this.form.resetFields();
                    this.$router.go(-1);
                  }
                });
              } else {
                this.$message.error(res.data.message || "提交异常，请重试~");
              }
            });
          } else {
            edit({ ...this.editData, ...values }).then((res) => {
              // console.log(res, res);
              if (res.data.code === 20000) {
                this.$message.success({
                  content: res.data.message || "修改成功~",
                  onClose: () => {
                    this.form.resetFields();
                    this.$router.go(-1);
                  }
                });
              } else {
                this.$message.error(res.data.message || "提交异常，请重试~");
              }
            });
          }
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
</style>
